<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-container>
            <el-aside class="el-aside" width="200px" style="background-color: #19374b">
                <v-menu2/>
            </el-aside>
            <el-main class="elMain padding0">
                <el-row>
                    <el-col :span="24">
                        <el-breadcrumb separator=">" class="paddingLeft68">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>卖家中心</el-breadcrumb-item>
                            <el-breadcrumb-item>这个是解决方案</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>
                <!-- 主信息 -->
                <!-- <el-row class="width1200 margin0auto">
                    <el-col :span="24" class="borderLeft paddingLeft15 color999">解决方案</el-col>
                </el-row> -->
                <div class="width1200 margin0auto marginTop53">
                    <el-row :gutter="20">
                        <el-col :span="24" class="singleProgram programList" :gutter="20">
                            <el-row class="bgWhite paddingBottom20" :gutter="20">
                                <el-col
                                    :span="7"
                                    :offset="1"
                                    class="border padding20 marginTop24"
                                    v-for="succseeCaseItem in solution"
                                    :key="succseeCaseItem.id"
                                >
                                    <el-row>
                                        <el-col :span="9">
                                            <div class="imgContains size107a113">
                                                <img :src="getImgUrl(succseeCaseItem.thumb)" alt="">
                                            </div>
                                        </el-col>
                                        <el-col :span="15" class="companyTitle">
                                            <el-row>
                                                <el-col
                                                    :span="24"
                                                    class="color333 fontSize17 overEclipse"
                                                >{{succseeCaseItem.name}}</el-col>
                                            </el-row>
                                            <el-row
                                                class="schema heightClap2"
                                            >{{succseeCaseItem.summary}}</el-row>
                                            <el-row>
                                                <el-col :span="24" class="companyBtn height48">
                                                    <el-tag
                                                        size="mini"
                                                        color="#6fbc85"
                                                        class="colorWhite"
                                                        v-for="(btnItem,index) in succseeCaseItem.projectTags"
                                                        v-show="btnItem"
                                                        v-if="index==0"
                                                        :key="btnItem"
                                                    >{{btnItem}}</el-tag>
                                                    <el-tag
                                                        size="mini"
                                                        color="#00c1de"
                                                        class="colorWhite"
                                                        v-for="(btnItem,index) in succseeCaseItem.projectTags"
                                                        v-show="btnItem"
                                                        v-if="index==1"
                                                        :key="btnItem"
                                                    >{{btnItem}}</el-tag>
                                                    <el-tag
                                                        size="mini"
                                                        color="#deb85e"
                                                        class="colorWhite"
                                                        v-for="(btnItem,index) in succseeCaseItem.projectTags"
                                                        v-show="btnItem"
                                                        v-if="index==2"
                                                        :key="btnItem"
                                                    >{{btnItem}}</el-tag>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                        <el-col :span="24" class="companyBorder">
                                            <el-row>
                                                <el-col :span="14">
                                                    <span
                                                        class="iconfont iconGroup- color999"
                                                        v-if="succseeCaseItem.stateCode==4"
                                                    ></span>
                                                    <span
                                                        class="iconfont iconcuowu color999"
                                                        v-else
                                                    ></span>
                                                    <span
                                                        class="color999"
                                                        v-if="succseeCaseItem.stateCode==4"
                                                    >发布时间：{{succseeCaseItem.pdate}}</span>
                                                    <span class="color999" v-else></span>
                                                </el-col>
                                                <el-col :span="10" class="textRight">
                                                    <span
                                                        @click="downLoad(succseeCaseItem.id)"
                                                        class="iconfont iconxiazai- pointer fontSize20 marginRight16"
                                                        v-if="succseeCaseItem.stateCode==4"
                                                    ></span>
                                                    <span
                                                        class="iconfont iconshangchuan3 pointer fontSize20 marginRight16"
                                                        @click="uploadItem(succseeCaseItem.id)"
                                                        v-else
                                                    ></span>
                                                    <span
                                                        class="iconfont iconbianji1 pointer fontSize20 marginRight16"
                                                        @click="editItem(succseeCaseItem.id)"
                                                    ></span>
                                                    <span
                                                        class="iconfont iconshanchu pointer fontSize20 marginRight16"
                                                        @click="delIcon(succseeCaseItem.id)"
                                                    ></span>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col
                                    :span="7"
                                    :offset="1"
                                    class="border padding20 marginTop24 bgFd"
                                >
                                    <el-row
                                        class="lineHeight160 pointer textCenter"
                                        @click.native="addNewSolute"
                                    >
                                        <span class="iconfont icontianjia fontSize40"></span>
                                        <span
                                            class="colorPrimary verticalAlignSuper"
                                        >&nbsp;&nbsp;添加解决方案</span>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.el-breadcrumb {
  background: #ffffff;
  line-height: 50px;
}
.marginTop10 {
  margin-top: 10px;
}
</style>
<script>
import VMenu2 from "../../layout/default/components/menu/supplierIndex";
import { serverBaseUrl } from "src/common/setting";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import getImgUrl from "src/common/setting";
export default {
  name: "SolutionList",
  data() {
    return {
      solution: [] //解决方案
    };
  },
  components: {
    VMenu2
  },
  mounted() {
    this.initDataMethod();
    // this.userInfo();
  },
  methods: {
    async initDataMethod() {
      const { $api } = this;
      var useData = await $api.user.apiCorpSolution();
      console.log(useData);
      if (useData.code == 0) {
        this.solution = useData.data;
      } else {
        this.$message.error(useData.msg);
      }
    },
    getImgUrl(url) {
      return this.utils.getImgUrl(url);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //点击下架
    downLoad(id) {
      this.$confirm("您确定执行该操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.realUpload(id);
      });
    },
    async realUpload(id) {
      const { $api } = this;
      let dataObj = {
        contentId: id,
        publish: false
      };
      const resData = await $api.user.apiCorpCasesPublish(dataObj);
      if (resData.code == 0) {
        this.$message.success("信息提交成功，等待后台管理员审核");
        this.$router.go(0);
      } else {
        this.$message.error(resData.msg);
      }
    },
    //点击上传
    uploadItem(id) {
      this.$confirm("上传之后等待后台管理员审核, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.realUpload(id);
      });
    },
    async realUpload(id) {
      const { $api } = this;
      let dataObj = {
        contentId: id,
        publish: true
      };
      const resData = await $api.user.apiCorpCasesPublish(dataObj);
      if (resData.code == 0) {
        this.$message.success("信息提交成功，等待后台管理员审核");
        this.$router.go(0);
      } else {
        this.$message.error(resData.msg);
      }
    },
    async delIcon(e) {
      const { $api } = this;
      let dataObj = {
        contentId: e
      };
      const resData = await $api.user.apiCorpCasesDelete(dataObj);
      console.log(resData);
      if (resData.code == 0) {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.$router.go(0);
      } else {
        this.$message.error(resData.msg);
      }
    },
    addNewSolute() {
      this.$router.push({
        name: "AddNewSolute",
        query: {
          type: 0,
          title: this.successTitle,
          itemId: "",
          tabStatus:'solution',
        }
      });
    },
    editItem(id){
        this.$router.push({
          'name':'SolutionManagement',
          query:{
            'id':id,
            'tabStatus':'solution',
          }
        })
      },
  }
};
</script>
<style scoped>
.marginTop34 {
  margin-top: 34px;
}
.marginTop45 {
  margin-top: 45px;
}
.companyBorder {
  border-top: 1px solid #ebebeb;
  line-height: 40px;
}
.schema {
  height: 48px;
  font-size: 14px;
  font-family: SourceHanSansCN-Light;
  font-weight: 300;
  color: rgba(102, 102, 102, 1);
  line-height: 24px;
  margin: 12px 0;
}
.companyName {
  font-size: 20px;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 27px;
}
.companyContent {
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 17px;
  margin: 20px 0;
}
.companySmallContent {
  margin: 0 auto !important;
  margin-top: 34px;
  width: 265px;
  font-size: 14px;
  font-family: SourceHanSansCN-Light;
  font-weight: 300;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
}
.el-breadcrumb,
.el-breadcrumb__separator {
  line-height: 70px;
  font-size: 14px;
  color: #666666;
}
.el-breadcrumb__inner {
  font-size: 14px;
  color: #666666;
  font-weight: 500 !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.elMain {
  right: 0;
  position: relative;
  padding: 0;
}
.el-container {
  border: 0 !important;
}
.el-upload__tip {
  text-align: center;
  line-height: 40px;
}
.size170 {
  width: 170px;
  height: 170px;
  padding: 10px;
  background: #ffffff;
  margin: 45px auto;
}
.el-tabs__item {
  line-height: 70px;
}
</style>
<style>
.el-upload-dragger {
  width: 1100px;
}
</style>
